//文档加载事件
$(function () {
    // 轮播的配置
    // $("#slider").slidebox({
    //     boxh: 450,//盒子的高度
    //     w: 970,//图片的宽度
    //     h: 450,//图片的高度
    //     isShow: true,//是否显示控制器
    //     isShowBtn: true,//是否显示左右按钮
    //     controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    //     controlsW: 12,//控制按钮宽度
    //     controlsH: 12,//控制按钮高度
    //     radius: 6//控制按钮圆角度数
    // });  
    // banner区域的轮播
    lunbo("#slider")
    // 服装配饰中的轮播
    lunbo(".myslider", 300, 455, 300, 15, 4, 0)
    /**
     * selector:选择器
     * boxh:盒子的高度
     * w: 图片的宽度
       h:图片的高度
       cw:控制按钮宽度
       ch:控制按钮高度
      rds:控制按钮圆角度数
     * */
    function lunbo(selector, boxh, w, h, cw, ch, rds) {

        $(selector).slidebox({
            boxh: boxh || 450,//盒子的高度
            w: w || 970,//图片的宽度
            h: h || 450,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: cw || 12,//控制按钮宽度
            controlsH: ch || 12,//控制按钮高度
            radius: rds || 6//控制按钮圆角度数
        });
    }
    jQuery(".Scroll-left").slide({
        titCell: ".hd ul",
        mainCell: ".bd ul",
        autoPage: true,
        effect: "left",
        autoPlay: true,//自动播放
        vis: 4
    });

    //首页的选项卡制作 
    $(" .common-top ul li").mouseenter(function () {
        //  alert(1)
        $(this).addClass("active").siblings().removeClass("active");
        let index = $(this).index();
        // 内容区域    
        $(this).closest(".common-top").siblings(".con").children("div").eq(index).addClass("cur").siblings().removeClass("cur")
        //$(".con >div") 要找到6个 0 1 2 3 4 5
        // $(this).index();        0 1 2

        //  $(".con >div").eq(index).addClass("cur").siblings().removeClass("cur")
    })
    let lis = document.querySelectorAll(".navbox li");
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseenter = function () {
            this.className = "active";
        }
        lis[i].onmouseleave = function () {
            this.className = "";
        }
    }
})
$(function () {
    // 楼层滚动
    /* 
    1 鼠标移入：
          改变背景色为对应的颜色
          改变背景图片的定位为水平方向 -40
    2 鼠标移出：
          改变背景色为空
          改变背景图片的定位为水平方向 0
    */
    let bgArr = ["#93d46f", "#f65727", "#bb9dee", "#ff7394", "#ccc"]
    $(".floorbox ul li").hover(function () {
        // alert(1)
        let index = $(this).index();
        $(this).css("background-color", bgArr[index])
        $(this).find("span").show().css({ "background-color": bgArr[index] })

        $(this).css("background-position-x", -40);
        // 回到顶部
        if ($(this).hasClass("returnTop")) {
            // console.log("1");

            $(this).css({
                "background-color": "#ccc",
                "background-image": "url(./images/re02.png)",
                "background-size": "80%",
                "background-position-x": 5
            })
        }

    }, function () {//鼠标移出
        // alert(2)
        $(this).css("background-color", "")
        $(this).css("background-position-x", 0);
        $(this).find("span").hide().css({ "background-color": "" })
        // 回到顶部
        if ($(this).hasClass("returnTop")) {
            // console.log("1");
            $(this).css({
                "background-image": "url(./images/re01.png)",
                "background-position-x": 5
            });

        }

    })
        .click(function () {
            /* 
               获取到对应的区域  ？
              1 给参与楼层滚动的区域书写一个标志.floor,通过类名来获取
                $(".floor").eq( 事件源li标签的索引)
              2 把对应区域距离文档顶部的偏移获取出来，
                 let top= $(".floor").eq( 事件源li标签的索引).offset().top
              3 赋给页面的滚动距离。
                 $('html,body').scrollTop(top)
            */
            //  如果是回到顶部，那么就不参与滚动
            if ($(this).hasClass("returnTop")) {
                // return;
                let $returnTop = $(".returnTop");
                let returnTop = $returnTop.get(0);
                returnTop.onclick = function () {
                    let timerId = setInterval(function () {
                        // 获取剩余卷动的距离
                        let st = document.documentElement.scrollTop || document.body.scrollTop;
                        // 剩余的距离
                        let newst = st - 50;
                        // 改变页面卷动距离，看到卷动效果
                        document.documentElement.scrollTop = newst;
                        document.body.scrollTop = newst;
                        if (newst <= 0) {
                            // 清除定时器
                            clearInterval(timerId);
                        }
                    }, 30)
                }
            }
            let index = $(this).index();
            let top = $(".floor").eq(index).offset().top;
            //  console.log(top);
            // $('html,body').scrollTop(top);
            $('html,body').animate({ scrollTop: top }, 1000);
        })
    let $imgbox = $("#imgbox");
    //获取自己的高度
    let myselfHeight = $imgbox.height();
    //  浏览器的高度
    let ch = document.documentElement.clientHeight;
    // console.log("浏览器的高度",ch,"自己的高度",myselfHeight);
    // 设置二维码的初始位置
    let initTop = (ch - myselfHeight) / 2
    // $imgbox.css("top", initTop);
    gundong();
    //窗口卷动事件
    window.onscroll = function () {
        console.log(1111);
        gundong();
    }
    //窗口的大小改变事件
    window.onresize = function () {
        gundong();
        // // console.log("resize");
        // //  浏览器的高度
        // let ch = document.documentElement.clientHeight;
        // // console.log("浏览器的高度",ch,"自己的高度",myselfHeight);
        // // 设置二维码的初始位置
        // let initTop = (ch - myselfHeight) / 2
        // // 获取卷动的距离
        // let st = document.documentElement.scrollTop || document.body.scrollTop
        // // $imgbox.css("top", initTop+st );   
        // $imgbox.animate({ top: (initTop + st) }, 30)
    }
    function gundong() {
        // console.log("resize");
        //  浏览器的高度
        let ch = document.documentElement.clientHeight;
        // console.log("浏览器的高度",ch,"自己的高度",myselfHeight);
        // 设置二维码的初始位置
        let initTop = (ch - myselfHeight) / 2
        // 获取卷动的距离
        let st = document.documentElement.scrollTop || document.body.scrollTop
        // $imgbox.css("top", initTop+st );   
        $imgbox.animate({ top: (initTop + st) }, 30)
    }

})
